Leaflet Tutrial Page 06

オープンソースによる地図表示（Leaflet編）６／９

2019/4/26 by T. Fujita

４－４、インタラクティブなマーカーの設置

　次に好きな位置にマーカーを設置し、CSV形式でローカル・ファイルとして保存・読込む方法を記載します。　今回は、画面上部にメニューを表示させ、そこから各種処理を選択出来るようにしました。　なお、マーカーの設置は、Leaflet内部処理系で経度が－３６０度から＋３６０度の範囲で表示させるようにしています。　その主な処理内容は、次の通りです。

　　（１）画面上部にメニューを表示
『Leaflet_Tutrial_404.html』ソースファイルにおける赤字部分と『scroll_menu.css』から構成されており、画面上部のメニュー部分にマウスを合わせると下側にサブメニューが表示され、選択できるようになっています。

　　（２）マーカーのスタイル設定
ソースファイルにおけるオレンジ色の文字部分と『Original_Style_404.css』、『Dialog_404.js』のオレンジ色の部分から構成されており、ダイアログボックスを表示しマーカーの選択とサイズの指定、タイトル付けが可能なようにしています。　ダイアログボックスの表示には、『jquery』及び『jquery-ui』を使用しています。　なお、マーカーをクリックすることで表示される吹き出しからそのマーカーを変更出来るようにしています。

　　（３）移動可能なマーカーの設置
ソースファイルにおける紫色の文字部分であり、メニューから「マーカー単独設置」、「マーカー連続設置」、「マーカー連続設置終了」を選択出来ます。　設置したマーカーは移動可能です。

　　（４）設置したマーカーの消去
ソースファイルにおける緑色の文字部分であり、メニューから「マーカー全消去」を選択することで、表示している全てのマーカーを消去出来ます。　また、マーカーをクリックすることで表示される吹き出しからそのマーカーを削除可能としています。

　　（５）CSV形式で保存と読込
ソースファイルにおける青字部分と『Dialog_404.js』の青字部分から構成されています。　データの保存先は、Windowsの標準設定ではローカルPCの「ダウンロード」フォルダです。　データの読み込みには、marghoobsuleman/ms-Dropdownを使用しています。　なお、緯度のデータは－１８０度～＋１８０度の範囲に制限している他、読み込んで表示したマーカーは移動できないようにしています。　残念ながら、CSV形式での保存と読込は「Safari」には対応できていません。

　以下にインタラクティブなマーカーの表示例とそのソースファイルの内容を示します。　単独で表示する場合は、『 Leaflet_Tutrial_404.html 』をクリックして下さい。　但し、緯度・経度とも”０度”の場合にはマーカーを表示しません。

　　　　　　　インタラクティブなマーカーの表示例

　ここで使用しているアイコン素材は、 FLAT ICON DESIGN および ICOON MONO から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。

　　　　　　　『 Leaflet_Tutrial_404.html 』のソースファイル内容

001  <!DOCTYPE html>
002  <html>
003  <head>
004      <title> Leaflet_Tutrial_404.html	2019/4/26	by T. Fujita </title>
005      <meta charset = "utf-8" />
006      <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007      <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
008      <link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
009      <link rel = "stylesheet" href = "./CSS/scroll_menu.css" /> 
010      <link rel = "stylesheet" href = "./CSS/Original_Style_001.css" /> 
011
012  <style>
013      html, body {
014	     width: 99%;
015	     height: 98%;
016	     font-size: 14px;
017	     z-index:0;
018      }
019  </style>
020
021  <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
022  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
023  <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
024  <script src = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script> 
025  <script src = "./JS/Dialog_404.js" ></script> 
026  <script>
027	 var Marker_LAT = new Array(); 
028	 var Marker_LON = new Array(); 
029	 var Marker_NAM = new Array(); 
030	 var Marker_LNK = new Array(); 
031	 var Marker_ICN = new Array(); 
032	 var Marker_ID = new Array(); 
033	 var Marker_Drag_flag = new Array(); 
034	 var Marker_Drag_info = new Array(); 
035	 var ClickLat = null; 
036	 var ClickLon = null; 
037	 var Marker_count = 0; 
038	 var Marker_ID_count = 0; 
039	 var SelectedID; 
040	 var Marker_flag = 0; 
041	 var Temp_shape, Temp_shape_clone; 
042	 var Temp, Temp_LAT, Temp_LON, Temp_NAM, Temp_LNK, Temp_ICN, Temp_ID; 
043	 var Temp_Drag_flag, Temp_Drag_info; 
044	 var Layer_404 = new Array(); 
045	 var Layer_404_clone = new Array(); 
046	 var Dialog_flag_001 = 0; 
047	 var map_404;
048
049	function init() {
050		map_404 = L.map('map_404').setView([35.0, 137.0], 6);
051		mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
052		L.tileLayer(
053			'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
054			attribution: 'Map data © ' + mapLink,
055			maxZoom: 18,
056		}).addTo(map_404);
057		map_404.on('click', function(e) { 
058			ClickLat = e.latlng.lat; 
059			ClickLon = e.latlng.lng; 
060			if ( Marker_flag == 1 ) { Leaflet_Marker_401(); } 
061			if ( Marker_flag == 2 ) { Leaflet_Marker_403(); } 
062		}); 
063	}
064
065	function Leaflet_Marker_400() {		// 初期設定（マーカー単独設置） 
066		ClickLat = null; 
067		ClickLon = null; 
068		Marker_flag = 1; 
069	} 
070
071	function Leaflet_Marker_401() {		// マーカー単独設置 
072	  if(Marker_flag == 1) { 
073		Marker_LAT[ Marker_count ] = ClickLat; 
074		Marker_LON[ Marker_count ] = ClickLon; 
075		Marker_NAM[ Marker_count ] = Set_Text; 
076		Marker_LNK[ Marker_count ] = Set_Link; 
077		Marker_ICN[ Marker_count ] = L.icon({ 
078			iconUrl: Icon_Url, 
079			iconSize: [Icon_W, Icon_H], 
080			iconAnchor : [Icon_AW, Icon_AH], 
081			popupAnchor: [Icon_PW, Icon_PH] 
082		}); 
083		Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count; 
084		Marker_Drag_flag[ Marker_count ] = true; 
085		Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。"; 
086		Temp = Marker_count; 
087		Marker_setting(); 
088		Marker_set(); 
089		Layer_404[ Temp ] = Temp_shape; 
090		Layer_404[ Temp ].addTo(map_404); 
091		Layer_404_clone[ Temp ] = Temp_shape_clone; 
092		Layer_404_clone[ Temp ].addTo(map_404); 
093		Marker_count = Marker_count + 1; 
094		Marker_ID_count = Marker_ID_count + 1; 
095		Marker_flag = 0; 
096	    } 
097	} 
098
099	function Leaflet_Marker_402() {		// 初期設定（マーカー連続設置） 
100		ClickLat = null; 
101		ClickLon = null; 
102		Marker_flag = 2; 
103	} 
104
105	function Leaflet_Marker_403() {		// マーカー連続設置 
106	  if(Marker_flag == 2) { 
107		Marker_LAT[ Marker_count ] = ClickLat; 
108		Marker_LON[ Marker_count ] = ClickLon; 
109		Marker_NAM[ Marker_count ] = Set_Text; 
110		Marker_LNK[ Marker_count ] = Set_Link; 
111		Marker_ICN[ Marker_count ] = L.icon({ 
112			iconUrl: Icon_Url, 
113			iconSize: [Icon_W, Icon_H], 
114			iconAnchor : [Icon_AW, Icon_AH], 
115			popupAnchor: [Icon_PW, Icon_PH] 
116		}); 
117		Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count; 
118		Marker_Drag_flag[ Marker_count ] = true; 
119		Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。"; 
120		Temp = Marker_count; 
121		Marker_setting(); 
122		Marker_set(); 
123		Layer_404[ Temp ] = Temp_shape; 
124		Layer_404[ Temp ].addTo(map_404); 
125		Layer_404_clone[ Temp ] = Temp_shape_clone; 
126		Layer_404_clone[ Temp ].addTo(map_404); 
127		Marker_count = Marker_count + 1; 
128		Marker_ID_count = Marker_ID_count + 1; 
129	    } 
130	} 
131
132	function Leaflet_Marker_404() {		// マーカー連続設置終了 
133		Marker_flag = 0; 
134	} 
135
136	function Leaflet_Marker_405() {		// マーカー全消去 
137		var j = Layer_404.length - 1; 
138		for(i = 0; i <= j; i++) { 
139			if(Layer_404[i] != null) { 
140				map_404.removeLayer(Layer_404[i]); 
141				map_404.removeLayer(Layer_404_clone[ i ]); 
142			} 
143		} 
144		Marker_count = 0; 
145		Marker_LAT = new Array(); 
146		Marker_LON = new Array(); 
147		Marker_NAM = new Array(); 
148		Marker_LNK = new Array(); 
149		Marker_ICN = new Array(); 
150	} 
151
152	function Leaflet_Marker_406() {		// マーカー保存（CSV形式） 
153	    for (i = 0; i <= (Marker_LON.length - 1); i++) { 
154		if( !isNaN(Marker_LON[ i ]) ) { 
155		    while( (Marker_LON[ i ] * 1.0) < -180) { 
156			Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) + 360; 
157		    } 
158		    while( (Marker_LON[ i ] * 1.0) > 180) { 
159			Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) - 360; 
160		    } 
161		} 
162	    } 
163	    if(Marker_LAT[ 0 ] == "LAT(deg.)") { 
164		var CSV_content = []; 
165	    } else { 
166		var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n"; 
167	    } 
168		const aTag = document.createElement('a'); 
169		aTag.download = "CSV_Data.csv"; 
170	    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); 
171	    Temp = Marker_LAT.length; 
172	    for ( i = 0; i < Temp; i++ ) { 
173		if( Marker_LAT[ i ] != "" && Marker_LON[ i ] != "" ) { 
174		  CSV_content = CSV_content + Marker_LAT[ i ] + "," + Marker_LON[ i ] + "," + Marker_NAM[ i ] + "," + Marker_LNK[ i ] + ",\r\n"; 
175		} 
176	    } 
177		var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"}); 
178		if(window.navigator.msSaveBlob) { 
179		     window.navigator.msSaveBlob(blob, aTag.download);					// for IE 
180		  } else if (window.URL && window.URL.createObjectURL) { 
181			aTag.href = window.URL.createObjectURL(blob);					// for FireFox 
182			document.body.appendChild(aTag); 
183			aTag.click(); 
184			document.body.removeChild(aTag); 
185		  } else if (window.webkitURL && window.webkitURL.createObject) { 
186			aTag.href = (window.URL || window.webkitURL).createObjectURL(blob);		// for Chrome 
187			aTag.click(); 
188		  } else { 
189			alert("保存に失敗しました！"); 
190		  } 
191	} 
192
193	function Leaflet_Marker_407() {		// マーカー読込（CSV形式） 
194		Dialog_002(); 
195	} 
196
197	function Marker_setting() {		// マーカー設定 
198		Temp_LAT = Marker_LAT[ Temp ] * 1.0; 
199		Temp_LON = Marker_LON[ Temp ] * 1.0; 
200		Temp_NAM = Marker_NAM[ Temp ]; 
201		Temp_LNK = Marker_LNK[ Temp ]; 
202		Temp_ICN = Marker_ICN[ Temp ]; 
203		Temp_ID = Marker_ID[ Temp ]; 
204		Temp_Drag_flag = Marker_Drag_flag[ Temp ] 
205		Temp_Drag_info = Marker_Drag_info[ Temp ] 
206		Set_Link = " "; 
207		if(Temp_LNK != undefined ) { 
208		    if( String( Temp_LNK ).length > 5 ) { 
209			Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Set_Text + "情報にリンク</a>"; 
210		    } 
211		} 
212	} 
213
214	function Marker_set() {			// マーカー設置 
215	  if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) { 
216	    if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) { 
217		if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) { 
218		    Temp_shape = L.marker([ Temp_LAT, Temp_LON ], 
219			{icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" + 
220			 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" + 
221			 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>"); 
222		    Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging); 
223		    if(Temp_LON >= 0) { 
224			Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ], 
225			    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" + 
226			 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" + 
227			 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>"); 
228			Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging); 
229		    } else { 
230			Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ], 
231			    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" + 
232			 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" + 
233			 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>"); 
234			Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging); 
235		    } 
236		} 
237	    } 
238	  } 
239	} 
240
241	function onMarkerOpen() {		// マーカーをクリックした時に表示する削除ボタンと変更ボタン 
242	    var tempMarker = this; 
243	    SelectedID = tempMarker.options.id; 
244	    $(".marker-delete-button:visible").click(function () { 
245		Marker_DEL(tempMarker); 
246	    }); 
247	    $(".marker-change-button:visible").click(function () { 
248		Dialog_001(); 
249	    }); 
250	} 
251
252	function Change_Marker() {	// 変更ボタン押下時の処理 
253	    for(i = 0; i <= Marker_count; i++) { 
254		if(SelectedID == Marker_ID[ i ] ) { 
255			Marker_NAM[ i ] = Set_Text; 
256			Marker_ICN[ i ] = L.icon({ 
257				iconUrl: Icon_Url, 
258				iconSize: [Icon_W, Icon_H], 
259				iconAnchor : [Icon_AW, Icon_AH], 
260				popupAnchor: [Icon_PW, Icon_PH] 
261			}); 
22		} 
253	    } 
254	    Marker_Refresh(); 
255	} 
256
257	function Marker_DEL(tempMarker) {	// 削除ボタン押下時の処理 
258		var k = 0; 
259		Marker_flag = 0; 
270		Marker_LAT[ Marker_count + 1 ] = ""; 
271		Marker_LON[ Marker_count + 1 ] = ""; 
272		Marker_NAM[ Marker_count + 1 ] = ""; 
273		Marker_LNK[ Marker_count + 1 ] = ""; 
274		Marker_ICN[ Marker_count + 1 ] = ""; 
275		Marker_ID[ Marker_count + 1 ] = ""; 
276		SelectedID = tempMarker.options.id; 
277		for(i = 0; i <= Marker_count; i++) { 
278			if(SelectedID == Marker_ID[ i ] ) { 
279				for(k = i; k <= Marker_count; k++) { 
270					Marker_LAT[ k ] = Marker_LAT[ k + 1 ]; 
271					Marker_LON[ k ] = Marker_LON[ k + 1 ]; 
272					Marker_NAM[ k ] = Marker_NAM[ k + 1 ]; 
273					Marker_LNK[ k ] = Marker_LNK[ k + 1 ]; 
274					Marker_ICN[ k ] = Marker_ICN[ k + 1 ]; 
285					Marker_ID[ k ] = Marker_ID[ k + 1 ]; 
286					Marker_Drag_flag[ k ] = Marker_Drag_flag[ k + 1 ]; 
287					Marker_Drag_info[ k ] = Marker_Drag_info[ k + 1 ]; 
288				} 
289			} 
290		} 
291		SelectedID = null; 
292		Marker_count = Marker_count - 1; 
293		Marker_Refresh(); 
294	} 
295
296	function Marker_Refresh() {		// マーカー再表示 
297		var j = Layer_404.length - 1; 
298		for(i = 0; i <= j; i++) { 
299		    if(Layer_404[ i ] != null) { 
300			map_404.removeLayer(Layer_404[ i ]); 
301			map_404.removeLayer(Layer_404_clone[ i ]); 
302		    } 
303		} 
304		for (i = 0; i <= Marker_count - 1; i++) 
305		{ 
306			Temp = i; 
307			Marker_setting(); 
308			Marker_set(); 
309			Layer_404[ Temp ] = Temp_shape; 
310			Layer_404[ Temp ].addTo(map_404); 
311			Layer_404_clone[ Temp ] = Temp_shape_clone; 
312			Layer_404_clone[ Temp ].addTo(map_404); 
313		} 
314	} 
315
316	function Dragging() {			// マーカーをドラッグ時の位置取得 
317		ClickLat = this._latlng.lat; 
318		ClickLon = this._latlng.lng; 
319		SelectedID = this.options.id; 
320		for(i = 0; i <= Marker_count; i++) { 
321			if(SelectedID == Marker_ID[ i ] ) { 
322				Marker_LAT[ i ] = ClickLat; 
323				Marker_LON[ i ] = ClickLon; 
324			} 
325		} 
326		Marker_Refresh(); 
327		SelectedID = null; 
328	} 
329
330  function CSV_Markers() {		// CSVデータを表示 
331	    for (i = 0; i <= (Data_CSV.length - 1); i++) { 
332		if((Data_CSV[i][0] * 1.0) > 90) { 
333		    Data_CSV[i][0] = 90; 
334		} 
335		if((Data_CSV[i][0] * 1.0) < -90) { 
336		    Data_CSV[i][0] = -90; 
337		} 
338		while( (Data_CSV[i][1] * 1.0) < -180) { 
339		    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360; 
340		} 
341		while( (Data_CSV[i][1] * 1.0) > 180) { 
342		    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360; 
343		} 
344	    } 
345	    for (i = 0; i <= (Data_CSV.length - 1); i++) { 
346		  Marker_LAT[ Marker_count ] = Data_CSV[i][0]; 
347		  Marker_LON[ Marker_count ] = Data_CSV[i][1]; 
348		  Marker_NAM[ Marker_count ] = Data_CSV[i][2]; 
349		  Marker_LNK[ Marker_count ] = Data_CSV[i][3]; 
350		  Marker_ICN[ Marker_count ] = L.icon({ 
351			iconUrl: Icon_Url, 
352			iconSize: [Icon_W, Icon_H], 
353			iconAnchor : [Icon_AW, Icon_AH], 
354			popupAnchor: [Icon_PW, Icon_PH] 
355		  }); 
356		  Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count; 
357		  Marker_Drag_flag[ Marker_count ] = false; 
358		  Marker_Drag_info[ Marker_count ] = "移動出来ません。"; 
359		  if( Data_CSV[i][0] != "" ) { 
360		    if( !isNaN( Data_CSV[i][0] ) ) { 
361			Temp = Marker_count; 
362			Marker_setting(); 
363			Marker_set(); 
364			Layer_404[ Temp ] = Temp_shape; 
365			Layer_404[ Temp ].addTo(map_404); 
366			Layer_404_clone[ Temp ] = Temp_shape_clone; 
367			Layer_404_clone[ Temp ].addTo(map_404); 
368		    } 
369		  } 
370		  Marker_count = Marker_count + 1; 
371		  Marker_ID_count = Marker_ID_count + 1; 
372	     } 
373  } 
374
375  </script>
376  </head>
377  <body onload="init()">
378  <nav id="menu-wrap" style="z-index: 1000;"> 
379	<ul id="menu" style="width: 98%;"> 
380		<li><a href="#">マーカー設定</a> 
381		<ul> 
382			<li><a href="#" onclick = "Dialog_001()">マーカーのスタイルを設定</a></li> 
383			<li><a href="#" onclick = "Leaflet_Marker_400()">マーカー単独設置 </a></li> 
384			<li><a href="#" onclick = "Leaflet_Marker_402()">マーカー連続設置 </a></li> 
385			<li><a href="#" onclick = "Leaflet_Marker_404()">マーカー連続設置終了 </a></li> 
386			<li><a href="#" onclick = "Leaflet_Marker_405()">マーカー全消去 </a></li> 
387			<li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存（CSV形式） </a></li> 
388			<li><a href="#" onclick = "Leaflet_Marker_407()">マーカー読込（CSV形式） </a></li> 
389		</ul> 
390		</li> 
391	</ul> 
392  </nav> 
393  <div id="map_Layer">
394    <div id="map_404" style="width: 100%; height: 400px; border: solid 1px"></div>
395    ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
396    <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
397    これらアイコン素材データの著作権は TopeconHeroes が保持しています。
398  </div>
399  </body>
400  </html>

　『 scroll_menu.css 』は、画面上部にメニューを表示するためのスタイルシートです。

　　　　　　　『 scroll_menu.css 』のソースファイル内容

001  #menu, #menu ul {
002	margin: 0;
003	padding: 0;
004	list-style: none;
005	position: absolute;
006  }
007
008  #menu {
009	width: 100%;
010	height: 30px;
011	margin: 0px auto;
012	border: 1px solid #444;
013	background-color: #111;
014	background-image: linear-gradient(#444, #111);
015	border-top-left-radius: 6px;
016	border-top-right-radius: 6px;
017	border-bottom-left-radius: 1px;
018	border-bottom-right-radius: 1px;
019	box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
020  }
021
022  #menu:before,
023
024  #menu:after {
025	content: "";
026	display: table;
027	clear: both;
028  }
029
030  #menu li {
031	float: left;
032	border: 1px solid #fff;
033	box-shadow: 1px 0 0 #444;
034	position: relative;
035	border-top-right-radius: 6px;
036	border-top-left-radius: 6px;
037  }
038
039  #menu a {
040	float: left;
041	padding: 5px 10px;
042	color: #FAFAFA;
043	text-transform: uppercase;
044	font: 12px Arial, Helvetica;
045	text-decoration: none;
046	text-shadow: 0 1px 0 #000;
047  }
048	
049  #menu li:hover > a {
050	color: #BA0000;
051  }
052
053  #menu ul {
054	margin: 10px 0 0 0;
055	opacity: 0;
056	visibility: hidden;
057	position: absolute;
058	top: 24px;
059	left: 0;
060	z-index: 2000;    
061	background: #444;
062	background: linear-gradient(#444, #111);
063	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
064	border-radius: 3px;
065	transition: all .2s ease-in-out;
066  }
067
068  #menu li:hover > ul {
069	opacity: 1;
070	visibility: visible;
071	margin: 0;
072  }
073
074  #menu ul ul {
075	top: 0;
076	left: 200px;
077	margin: 0 0 0 8px;
078	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
079  }
080
081  #menu ul li {
082	float: none;
083	display: block;
084	border: 0;
085	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
086  }
087
088  #menu ul li:last-child {   
089	box-shadow: none;    
090  }
091
092  #menu ul a {    
093	padding: 3px;
094	width: 200px;
095	display: block;
096	white-space: nowrap;
097	float: none;
098	text-transform: none;
099  }
100
101  #menu ul a:hover {
102	color: #FAFAFA;
103	background-color: #BA0000;
104	background-image: linear-gradient(#BA0000, #111);
105  }
106
107  #menu ul li:last-child > a {
108	border-radius: 0 0 3px 3px;
109  }
110
111  #scroll {
112	max-width: 210px;
113	max-height: 300px;
114	overflow-y: auto;
115	overflow-x: hidden;
116  }
117
118  #myColor {
119	border: 1px solid #FFFFFF;
120	position: absolute;
121	top: 2px;
122  }
123
124  #txtInfo {
125	position: absolute;
126	left: 546px;
127  }
128
129  #menu-wrap{
130	width: 100%;
131  }
132
133  #map_Layer {
134	width: 100%;
135	height: 93%;
136	position: relative;
137	top:30px;
138	z-index: 0;
13940  }
140
141  .leaflet-container {
142	background: #fff;
143	outline: 0;
144  }

　『 Original_Style_404.css 』は、ダイアログボックス内を表示するためのスタイルシートです。

　　　　　　　『 Original_Style_404.css 』のソースファイル内容

001  .leaflet-container {
002      background: #fff;
003      outline: 0;
004  }
005  .ui-widget {
006      font-family: Arial,Verdana,sans-serif;
007      font-size: 0.8em;
008  }
009  .ui-slider-range {
010      background: #808080;
011  }
012  #console {
013     height: 136px;
014     overflow-y: scroll;
015     color: white;
016     background-color: black;
017  }

　『 Dialog_404.js 』は、マーカーのスタイルを選択するダイアログボックス（オレンジ色の部分）と CSVファイルを読み込みマーカーを表示させるダイアログボックス（青文字の部分）のJavascriptファイルです。
　ダイアログボックス内で選択できるマーカーは、１９行目～７８行目で６０個指定しています。　これを変更することで任意のマーカーを任意の個数使用できます。　ここでは、選択時に表示するマーカーのサイズを64×64ドットに統一しています。

　　　　　　　『 Dialog_404.js 』のソースファイル内容

001  var Set_Text = ""; 
002  var Set_Link = " "; 
003  var Icon_Url = "../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png"; 
004  var Icon_W = 24; 
005  var Icon_H = 24; 
006  var Icon_AW = Math.round(Icon_W / 2); 
007  var Icon_AH = Math.round(Icon_H / 2); 
008  var Icon_PW = 0; 
009  var Icon_PH = Math.round(Icon_H / 2) * -1; 
010  var Max_M_Size = 64; 
011  var Min_M_Size = 8; 
012  var Data_CSV = new Array(); 
013
014  $(document).ready( function() {
015        $("body").append('<div id="dialog_001" style="z-index: 2000;"><p><form name="Form_001"> Title: '+ 
016  '<input type="text" style="width: 230px;" name="txt_mk" value=""></form><BR>'+ 
017  '<div>Marker Select:<BR>'+ 
018  '<select id="Marker_Samples" name="Marker_Samples" style="width:150px;">'+ 
019  '<option value="1" title="../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png">001</option>'+ 
020  '<option value="2" title="../ICONS/BW_Icon/BW_Icons_64/icon_127890_64.png">002</option>'+ 
021  '<option value="3" title="../ICONS/BW_Icon/BW_Icons_64/icon_114880_64.png">003</option>'+ 
022  '<option value="4" title="../ICONS/BW_Icon/BW_Icons_64/icon_109890_64.png">004</option>'+ 
023  '<option value="5" title="../ICONS/BW_Icon/BW_Icons_64/icon_001050_64.png">005</option>'+ 
024  '<option value="6" title="../ICONS/BW_Icon/BW_Icons_64/icon_119170_64.png">006</option>'+ 
025  '<option value="7" title="../ICONS/BW_Icon/BW_Icons_64/icon_122590_64.png">007</option>'+ 
026  '<option value="8" title="../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png">008</option>'+ 
027  '<option value="9" title="../ICONS/BW_Icon/BW_Icons_64/icon_133000_64.png">009</option>'+ 
028  '<option value="10" title="../ICONS/BW_Icon/BW_Icons_64/icon_115740_64.png">010</option>'+ 
029  '<option value="11" title="../ICONS/BW_Icon/BW_Icons_64/icon_115710_64.png">011</option>'+ 
030  '<option value="12" title="../ICONS/BW_Icon/BW_Icons_64/icon_115750_64.png">012</option>'+ 
031  '<option value="13" title="../ICONS/BW_Icon/BW_Icons_64/icon_115720_64.png">013</option>'+ 
032  '<option value="14" title="../ICONS/BW_Icon/BW_Icons_64/icon_147060_64.png">014</option>'+ 
033  '<option value="15" title="../ICONS/BW_Icon/BW_Icons_64/icon_127900_64.png">015</option>'+ 
034  '<option value="16" title="../ICONS/BW_Icon/BW_Icons_64/icon_109850_64.png">016</option>'+ 
035  '<option value="17" title="../ICONS/BW_Icon/BW_Icons_64/icon_111050_64.png">017</option>'+ 
036  '<option value="18" title="../ICONS/BW_Icon/BW_Icons_64/icon_111060_64.png">018</option>'+ 
037  '<option value="19" title="../ICONS/BW_Icon/BW_Icons_64/icon_111520_64.png">019</option>'+ 
038  '<option value="20" title="../ICONS/BW_Icon/BW_Icons_64/icon_127100_64.png">020</option>'+ 
039  '<option value="21" title="../ICONS/BW_Icon/BW_Icons_64/icon_127110_64.png">021</option>'+ 
040  '<option value="22" title="../ICONS/BW_Icon/BW_Icons_64/icon_127120_64.png">022</option>'+ 
041  '<option value="23" title="../ICONS/BW_Icon/BW_Icons_64/icon_127130_64.png">023</option>'+ 
042  '<option value="24" title="../ICONS/BW_Icon/BW_Icons_64/icon_127140_64.png">024</option>'+ 
043  '<option value="25" title="../ICONS/BW_Icon/BW_Icons_64/icon_127150_64.png">025</option>'+ 
044  '<option value="26" title="../ICONS/BW_Icon/BW_Icons_64/icon_127160_64.png">026</option>'+ 
045  '<option value="27" title="../ICONS/BW_Icon/BW_Icons_64/icon_001720_64.png">027</option>'+ 
046  '<option value="28" title="../ICONS/BW_Icon/BW_Icons_64/icon_100590_64.png">028</option>'+ 
047  '<option value="29" title="../ICONS/BW_Icon/BW_Icons_64/icon_100600_64.png">029</option>'+ 
048  '<option value="30" title="../ICONS/BW_Icon/BW_Icons_64/icon_102040_64.png">030</option>'+ 
049  '<option value="31" title="../ICONS/BW_Icon/BW_Icons_64/icon_104940_64.png">031</option>'+ 
050  '<option value="32" title="../ICONS/BW_Icon/BW_Icons_64/icon_107470_64.png">032</option>'+ 
051  '<option value="33" title="../ICONS/BW_Icon/BW_Icons_64/icon_108510_64.png">033</option>'+ 
052  '<option value="34" title="../ICONS/BW_Icon/BW_Icons_64/icon_108730_64.png">034</option>'+ 
053  '<option value="35" title="../ICONS/BW_Icon/BW_Icons_64/icon_111960_64.png">035</option>'+ 
054  '<option value="36" title="../ICONS/BW_Icon/BW_Icons_64/icon_111970_64.png">036</option>'+ 
055  '<option value="37" title="../ICONS/BW_Icon/BW_Icons_64/icon_112440_64.png">037</option>'+ 
056  '<option value="38" title="../ICONS/BW_Icon/BW_Icons_64/icon_112450_64.png">038</option>'+ 
057  '<option value="39" title="../ICONS/BW_Icon/BW_Icons_64/icon_113000_64.png">039</option>'+ 
058  '<option value="40" title="../ICONS/BW_Icon/BW_Icons_64/icon_113010_64.png">040</option>'+ 
059  '<option value="41" title="../ICONS/BW_Icon/BW_Icons_64/icon_114520_64.png">041</option>'+ 
060  '<option value="42" title="../ICONS/BW_Icon/BW_Icons_64/icon_114530_64.png">042</option>'+ 
061  '<option value="43" title="../ICONS/BW_Icon/BW_Icons_64/icon_114770_64.png">043</option>'+ 
062  '<option value="44" title="../ICONS/BW_Icon/BW_Icons_64/icon_114780_64.png">044</option>'+ 
063  '<option value="45" title="../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png">045</option>'+ 
064  '<option value="46" title="../ICONS/BW_Icon/BW_Icons_64/icon_124660_64.png">046</option>'+ 
065  '<option value="47" title="../ICONS/BW_Icon/BW_Icons_64/icon_127930_64.png">047</option>'+ 
066  '<option value="48" title="../ICONS/Flat_Icons/s64_f_business_72_0nbg.png">048</option>'+ 
067  '<option value="49" title="../ICONS/Flat_Icons/s64_f_business_76_0nbg.png">049</option>'+ 
068  '<option value="50" title="../ICONS/Flat_Icons/s64_f_object_6_2nbg.png">050</option>'+ 
069  '<option value="51" title="../ICONS/Flat_Icons/s64_f_object_7_2nbg.png">051</option>'+ 
070  '<option value="52" title="../ICONS/Flat_Icons/s64_f_object_24_1nbg.png">052</option>'+ 
071  '<option value="53" title="../ICONS/Flat_Icons/s64_f_object_25_0nbg.png">053</option>'+ 
072  '<option value="54" title="../ICONS/Flat_Icons/s64_f_object_27_2nbg.png">054</option>'+ 
073  '<option value="55" title="../ICONS/Flat_Icons/s64_f_object_155_1nbg.png">055</option>'+ 
074  '<option value="56" title="../ICONS/Flat_Icons/s64_f_object_164_2nbg.png">056</option>'+ 
075  '<option value="57" title="../ICONS/Flat_Icons/s64_f_object_167_0nbg.png">057</option>'+ 
076  '<option value="58" title="../ICONS/Flat_Icons/s64_f_object_173_0nbg.png">058</option>'+ 
077  '<option value="59" title="../ICONS/Flat_Icons/s64_f_object_115_0nbg.png">059</option>'+ 
078  '<option value="60" title="../ICONS/Flat_Icons/s64_f_object_116_1nbg.png">060</option>'+ 
079  '</select></div><BR>'+ 
080  '<div><tr><td><BR><div id="num_001"></div><div id="slider_001"></div>'+ 
081  '<BR><BR><div id="Selected_Icon">Selected Icon: <img src=""></div>'+ 
082  '</td></tr></div><BR>(注) ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および' + 
083  '<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>' + 
084  'これらアイコン素材データの著作権は TopeconHeroes が保持しています。</p><div>'); 
085
086	$('#Selected_Icon img').attr('src', Icon_Url); 
087
088	$('#dialog_001').dialog({ 
089		autoOpen: false, 
090		title: 'Please Set the Icon Style.', 
091		height: 450, 
092		width: 300, 
093		closeOnEscape: true, 
094		modal: true, 
095		buttons: { 
096			"設定": function(){ 
097				Set_Text = document.Form_001.txt_mk.value; 
098				var Temp = Marker_Samples.options[Marker_Samples.selectedIndex].title; 
099				Icon_Url = Temp; 
100				Icon_AW = Math.round(Icon_W / 2); 
101				Icon_AH = Math.round(Icon_H / 2); 
102				Icon_PW = 0; 
103				Icon_PH = Math.round(Icon_H / 2) * -1; 
104				Change_Marker(); 
105				$(this).dialog('close'); 
106			} 
107		} 
108	}); 
109
110        $("body").append('<div id="dialog_002" style="z-index: 2000;"><p><form name="Form_002">'+ 
111  'Title: <input type="text" style="width: 230px;" name="txt_dat" value=""></form></p><HR>'+ 
112  '<p> File Select:'+ 
113  '<form name="subinput">'+ 
114  '<center>CSVファイルを指定してください。<BR><BR>'+ 
115  '  <TD><input type="file" name="select" id="select_002" value=""></TD>'+ 
116  '  <BR><BR>'+ 
117  '</center></p></div>'); 
118
119	$('#dialog_002').dialog({ 
120		autoOpen: false, 
121		title: 'CSVファイル選択', 
122		height: 400, 
123		width: 300, 
124		closeOnEscape: true, 
125		modal: true, 
126		show: "fade", 
127		hide: "fade", 
128		buttons: { 
129			"Select the Marker": function(){ 
130				Dialog_001(); 
131			}, 
132			"Set Markers": function(){ 
133				CSV_Data(); 
134				CSV_Markers(); 
135			}, 
136			"Close": function(){ 
137				$(this).dialog('close'); 
138			} 
139		} 
140	}); 
141
142
143     $('#slider_001').slider( { 
144         orientation: 'horizontal', 
145         range: 'min', 
146         max: 255, 
147         value: 127, 
148         slide: refreshSwatch, 
149         change: refreshSwatch 
150     } ); 
151     $( '#slider_001' ).slider( 'value', 96 ); 
152     $( '#Marker_Samples' ).msDropDown({ 
153		visibleRows:4, 
154		on:{change:function(data, ui) { 
155			Icon_Url = Marker_Samples.options[Marker_Samples.selectedIndex].title; 
156			$('#Selected_Icon img').attr('src', Icon_Url); 
157		}} 
158     }); 
159  });
160
161
162  function Dialog_001() { 
163	document.Form_001.txt_mk.value = ""; 
164	$('#dialog_001').dialog('open'); 
165  } 
166
167  function Dialog_002() { 
168	CSV_Data(); 
169	document.Form_002.txt_dat.value = ""; 
170	$('#dialog_002').dialog('open'); 
171  } 
172
173
174  function refreshSwatch() { 
175     Icon_W = Math.round($('#slider_001').slider('value') / 255 * Max_M_Size); 
176     if (Icon_W <= Min_M_Size) { Icon_W = Min_M_Size; } 
177     Icon_H = Icon_W; 
178     $( '#num_001' ).html( 'Marker Size： ' + Icon_W ); 
179     $( '#Selected_Icon img' ).css( { width: Icon_W, height: Icon_H } ); 
180  } 
181
182  function CSV_Data() { 
183    if(window.File) { 
184	  var select = document.getElementById('select_002'); 
185	  select.addEventListener('change', function(e) { 
186	  var fileData = e.target.files[0]; 
187
188	  Data_CSV = []; 
189	  var reader = new FileReader(); 
190	  reader.onerror = function() { 
191		alert('ファイル読み込みに失敗しました。'); 
192	  } 
193	  reader.onload = function() { 
194		var lineArr = reader.result.split("\r\n"); 
195		for (var i = 0; i < lineArr.length; i++) { 
196			Data_CSV[i] = lineArr[i].split(","); 
197		} 
198	  } 
199	  reader.readAsText(fileData); 
200	  }, false); 
201    } 
202  }

　ここで使用するCSVファイルには、緯度、経度、名称、リンク先の４項目を記載します。（緯度、経度は必須です）　そのフォーマット例（MS-EXCELでの表示）を次に示します。　緯度・経度は、「３－４、マウス位置表示」の項で表示される数値を使用する事が出来ます。　なお、CSVファイル内に全角文字を使用する場合には、UTF8で保存する必要があります。（シフトJISで保存すると文字化けしますので、ご注意ください）

　 CSVサンプル

Previous Page Next Page

オープンソースによる地図表示（Leaflet編）６／９

４－４、インタラクティブなマーカーの設置

- 6 -